<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" th:href="@{/favicon.ico}" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{/css/app.css}">
    <link rel="stylesheet" th:href="@{/css/iconfont.css}">
    <link rel="stylesheet" th:href="@{/css/home.css}">
    <title>Blog</title>
</head>
<body>
    <div class="headBar">
        <div class="headBar-items">
            <div class="headBar-item">
                <a th:href="@{/home}">主页</a>
            </div>
            <div class="headBar-item">
                <a th:href="@{/auth}" target="_blank">说明</a>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content-article">
            <ul>
                <li>
                    <span>
                        <div th:text="${category.value}" style="padding: 10px 0px;font-size: 30px;font-weight: bold"></div>
                        <div>
                            <span th:text="${category.blog}" style="font-size: 20px;padding: 10px 0px" class="iconfont icon-image-text"></span>
                        </div>
                        <h2 th:text="${category.introduction}" style="padding: 10px 0px"></h2>
                    </span>
                </li>
            </ul>
            <ul th:each="blog:${blogs}">
                <li>
                    <img th:src="@{${blog.cover}}">
                    <span>
                        <h1><a th:href="@{'/user/'+${user.id}+'/blog/'+${blog.id}+'/article'}" th:text="${blog.title}" target="_blank"></a></h1>
<!--                        <div>-->
<!--                            <h4 th:if="${blog.top}" class="iconfont icon-discount">Top</h4>-->
<!--                        </div>-->
                        <div>
                            <h2 th:text="${blog.releaseTime}" class="iconfont icon-edit"></h2>
                            <h2 th:text="${blog.browse}" class="iconfont icon-browse"></h2>
                            <h2 th:text="${blog.good}" class="iconfont icon-good"></h2>
                        </div>
                        <h3 th:text="${blog.blogAbstract}"></h3>
                    </span>
                </li>
            </ul>
            <div style="display: flex;align-items: center;justify-content: space-between" >
                <a th:if="${page!=2}" th:href="@{'/user/'+${user.id}+'/category/'+${category.id}+'?page='+${page-2}}" class="iconfont icon-arrow-left-bold" style="font-size: 30px;background-color: #fff;border-radius: 10px;color: #000;padding: 10px"></a>
                <a th:if="${blogs.size()==pageSize}" th:href="@{'/user/'+${user.id}+'/category/'+${category.id}+'?page='+${page}}" class="iconfont icon-arrow-right-bold" style="font-size: 30px;background-color: #fff;border-radius: 10px;color: #000;padding: 10px"></a>
            </div>
        </div>
    </div>
</body>
</html>